This sample demonstrates how to use the ScrollViewer control to pan and zoom.
Note This sample was created using one of the universal app templates available in Visual Studio. It shows how its solution is structured so it can run on both Windows 8.1 and Windows Phone 8.1. For more info about how to build apps that target Windows and Windows Phone with Visual Studio, see Build apps that target Windows and Windows Phone 8.1 by using Visual Studio.
Specifically, this sample covers:
- Using panning and scrolling to enable users to reach content that won't otherwise fit within a view. You can use the HorizontalScrollMode and VerticalScrollMode properties to restrict panning to the horizontal or vertical axis or enable panning in any direction. You can use the IsHorizontalRailEnabled and IsVerticalRailEnabled properties to lock the motion to the horizontal or vertical axis after panning has started. You can use the HorizontalScrollBarVisibility and VerticalScrollBarVisibility to show, hide, or disable scroll bars.
- Using snap points to help users reach key locations in your content. You can use mandatory snap points to automatically continue panning until a snap point is reached, or you can use proximity snap points to continue panning only when the current location is close to a snap point. You can specify the snap point type by setting the HorizontalSnapPointsType and VerticalSnapPointsType properties.
- Enabling users to resize or zoom your content by setting the ZoomMode property. You can also set the minimum and maximum zoom levels through the MinZoomFactor and MaxZoomFactor properties.
This sample is written in XAML. For the HTML version, see the Scrolling, panning, and zooming sample (HTML).
To obtain an evaluation copy of Windows 8.1, go to Windows 8.1.
To obtain an evaluation copy of Microsoft Visual Studio 2013, go to Visual Studio 2013.
Related topics
- Roadmaps
- Roadmap for C# and Visual Basic
- Samples
- Windows 8 app samples
- Reference
- ScrollViewer
- HorizontalScrollMode
- VerticalScrollMode
- IsHorizontalRailEnabled
- IsVerticalRailEnabled
- HorizontalScrollBarVisibility
- VerticalScrollBarVisibility
- HorizontalSnapPointsType
- VerticalSnapPointsType
- ZoomMode
- MinZoomFactor
- MaxZoomFactor
- Concepts
- Create an app using C# or Visual Basic
- Guidelines for optical zoom and resizing
- Guidelines for panning
Operating system requirements
| Client | |
|---|---|
| Server | |
| Phone |
Build the sample
- Start Microsoft Visual Studio 2013 Update 2 and select File > Open > Project/Solution.
- Go to the directory to which you unzipped the sample. Then go to the subdirectory containing the sample, and double-click the Visual Studio 2013 Update 2 Solution (.sln) file.
- Select either the Windows or Windows Phone project version of the sample. Press Ctrl+Shift+B, or select Build > Build Solution.
Run the sample
The next steps depend on whether you just want to deploy the sample or you want to both deploy and run it.
Deploying the sample
- Select either the Windows or Windows Phone project version of the sample.
- Select Build > Deploy Solution.
Deploying and running the sample
- Right-click either the Windows or Windows Phone project version of the sample in Solution Explorer and select Set as StartUp Project.
- To debug the sample and then run it, press F5 or select Debug > Start Debugging. To run the sample without debugging, press Ctrl+F5 or selectDebug > Start Without Debugging.